body {
    background-size: auto;
    background: #FAFAFA url('src/assets/images/backGround/backGround_login.jpg') no-repeat;
    text-align: center;
    overflow: hidden;
    margin: 0;
}

.switch {
    background-color: #FCFBFA;
    width: 400px;
    height: 140px;
    position: absolute;
    left: 65%;
    margin-right: 300px;
    top: 68%;
    border-radius: 8px;
}

#change:checked + label,
    /* +用来选择同级后面最近的元素  */
#change:not(:checked) + label {
    background-color: #428f90;
    color: white;
    width: 280px;
    padding: 8px 0;
    /* 用padding方便文字垂直居中 */
    font-size: 24px;
    font-weight: 600;
    position: absolute;
    left: 65%;
    margin-left: 68px;
    top: 75%;
    border-radius: 8px;
    overflow: hidden; /*extend*/
    cursor: pointer;
}

/* 旋转体 */
.turn {
    width: 400px;
    height: 500px;
    position: absolute;
    left: 65%;
    /* margin-right: 300px; */
    top: 8%;
    perspective: 800px;
    /* 旋转的时候的透视效果 */
}

.over {
    width: 100%;
    height: 100%;
    border: 2px solid #a1a1a1;
    border-radius: 10px; /*边框圆角*//*extend*/
    box-shadow: 0 0 25px #617679; /*边框阴影*//*extend*/
    /* backdrop-filter: blur(3px); */
    transform-style: preserve-3d;
    transition: all 1.6s ease;
    /* 旋转持续时间 */
    /* ease是慢快慢 */
    float: right; /*extend*/
}

#change:checked
~
.turn .over {
    transform: rotateY(180deg);
}

form {
    float: right; /*extend*/
    position: absolute;
    background-color: rgb(252, 251, 250);
    height: 100%;
    border-radius: 8px;
    transform-style: preserve-3d; /*add*/
    /*the key that the input tags can't be focused */
}

.sign {
    transform: rotateY(180deg);
}

h1, h2 {
    color: #1f2029;
    user-select: none;
}

h1 {
    margin-top: 38px;
}

input {
    background-color: #4E495D;
    width: 70%;
    height: 48px;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 16px;
    font-size: 18px;
    color: #c4c3ca;
    font-weight: 500;
    outline: none;
    border: none;
    box-shadow: 0 4px 8px 0 rgba(78, 73, 79, .5);
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 1px);
}

.bro_error {
    box-shadow: 0 0 15px #db0707;
    content: "输入有误！";
}

.font_error{
    color:#db0707;
}

.font_success{
    color: green;
}

.bro_success{
    box-shadow: 0 0 0px;
}

form input:focus {
    box-shadow: 0 0 15px #0a6377;
}

/*控制输入点击时的框阴影*/


/* .login{
  /* backface-visibility: hidden;
} */
.login input:nth-child(-n+3) {
    /* 选择class为login的子元素中的前三个input */
    margin: 10px 0;
}

.btn {
    background-color: #1bb2bd;
    border: none;
    width: 140px;
    font-size: 24px;
    font-weight: 600;
    padding: 6px 0;
    color: white;
    border-radius: 8px; /*边框圆角*/
    margin-top: 15px;
    cursor: pointer;
}

.btn:hover {
    background-color: #126667;
}

#change:checked + label:hover,#change:not(:checked) + label:hover{
    background-color: #084f50
}
/* .changeBox_account{
  top:80%;
  position: absolute;
  left:70%;
} */

#Id_Msg, #PW_Msg, #PW_Msg1,#TEL_Msg,#Name_Msg {
    position: relative;
    font-size: 3px;
    text-align: left;
    margin-left: 50px;

}

#return .btn{

    position: absolute;
    left: 72.2%;/*394px;*/
    top: 80%;
    background-color: rgb(32, 158, 120);
}
#return .btn:hover{

    background-color: rgb(44, 131, 105);
}
